<template>
  <el-dialog
    title="选择要复制到的日期"
    v-model="dialogVisible"
    width="26%"
    @close="cancel"
  >
    <div class="checkbox-group">
      <div v-for="(day, index) in weekDate" :key="index">
        <el-checkbox
          :value="day"
          :name="day"
          v-model="selectedDays[index]"
          @change="handleCheckboxChange(index)"
          :disabled="index === parseInt(isCheIndex)"
        >
          {{ day }}
        </el-checkbox>
      </div>
    </div>
    <div class="button_box">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  isChecked: boolean
  isCheIndex: string
  selectedDaysData: number[][]
}>()

const emit = defineEmits<{
  (e: 'send', val: boolean): void
  (e: 'updateSelectedDays', val: { day: string; index: number }[]): void
}>()

const dialogVisible = ref<boolean>(true)

const weekDate = ref<string[]>([
  '星期一',
  '星期二',
  '星期三',
  '星期四',
  '星期五',
  '星期六',
  '星期日',
])

const selectedDays = ref<boolean[]>([
  false,
  false,
  false,
  false,
  false,
  false,
  false,
])

const handleCheckboxChange = (index: number) => {
  selectedDays.value[index] = selectedDays.value[index]
}

const cancel = () => {
  emit('send', false)
}

const confirm = () => {
  const selectedDaysInfo: { day: string; index: number }[] = []
  selectedDays.value.forEach((checked, index) => {
    if (checked) {
      selectedDaysInfo.push({ day: props.isCheIndex, index })
    }
  })
  emit('updateSelectedDays', selectedDaysInfo)
  emit('send', false)
}
</script>

<style lang="scss" scoped>
.el-checkbox-group {
  width: 80%;
  margin: 0 auto;
  .el-checkbox {
    height: 40px;
    margin: 0 10px;
  }
}
.checkbox-group {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  .el-checkbox {
    height: 40px;
    margin: 0 10px;
  }
}
.button_box {
  display: flex;
  width: 100%;
  justify-content: end;
}
</style>
